<%@ page language="java" contentType="text/html;charset=utf-8"
	pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<script src="<c:url value='/js/jquery.form.js'/>"></script>
<%-- <script  src="<c:url value='/js/lightbox-2.6.min.js'/>"></script>
<link href="<c:url value='/css/lightbox.css' />" rel="stylesheet" /> --%>

<script type="text/javascript">
function validDisplayZone() {
	$("#display-zone-name-div").removeClass("control-group error");
	$("#display-zone-name-div").addClass("control-group");
	$("#display-zone-number-div").removeClass("control-group error");
	$("#display-zone-number-div").addClass("control-group");

	var name = $("#display-zone-name").val().trim();
	var number = $("#display-zone-number").val().trim();
	
	if (name == "") {
		$("#display-zone-name-div").removeClass("control-group");
		$("#display-zone-name-div").addClass("control-group error");
		$("#display-zone-name-help").html("名称不能为空");
		return false;
	}
	if (number == "") {
		$("#display-zone-number-div").removeClass("control-group");
		$("#display-zone-number-div").addClass("control-group error");
		$("#display-zone-number-help").html("数字不能为空");
		return false;
	}
	return true;
}

function valid(){
	return true;
}

function valid2() {
	$("#div_page").removeClass("control-group error");
	$("#div_page").addClass("control-group");
	var page = $("#ud-page-name]").val().trim();
	if (page == "") {
		$("#div_page").removeClass("control-group");
		$("#div_page").addClass("control-group error");
		$("#help_page").html("名称不能为空");
		return false;
	}
}
</script>
<div>
    <div class="">
            <ul class="breadcrumb">
                <li>
                    <h3 style="margin-top: auto">
                        <c:out value="${project.name}"></c:out>
                        <span class="divider">/</span>
                    </h3>
                </li>
                <li><h3>显控设计模式 <span class="divider">/</span></h3></li>
                <li class="active"><h3><a href="#">信息显示</a> <span class="divider">/</span></h3></li>
            </ul>
    </div>
    <hr  />
	<!-- div class="tabbable">
		<div class="tabbable" style="margin-bottom: 18px;">
			<ul class="nav nav-tabs">
			    <li class=""><a href="" data-toggle="pill"><h3>实体数据区</h3></a></li>
				<li class=""><a href="" data-toggle="pill"><h3>总线通信</h3></a></li>
				<li class=""><a href="" data-toggle="pill"><h3>IO通信</h3></a></li>
				<li class="active"><a href="" data-toggle="pill"><h3>信息显示</h3></a></li>
				<li class=""><a href="" data-toggle="pill"><h3>控制响应</h3></a></li>

			</ul>
			<div class="tab-content"
				style="padding-bottom: 9px; border-bottom: 1px solid #ddd;">
				<div class="tab-pane" id="tab8"></div>
				<div class="tab-pane" id="tab1"></div>
				<div class="tab-pane" id="tab2"></div -->
			<div>
				<div class="tab-pane active form-horizontal" id="tab3">
					<div class="span9" align="right">
					<input type="hidden" name="dpcUri" value="${dpcUri}"></input>
					 <c:choose>
                        <c:when test="${isEdit}" >
						<a class="btn"
							href="/ManEnv/designPatternCategory/${project.id}/design_pattern_component/IO/edit"><i class="icon-arrow-left"></i> 上一步</a>
						<a class="btn"
							href="/ManEnv/designPatternCategory/${project.id}/design_pattern_component/CONTROL/edit"><i class="icon-arrow-right"></i> 下一步</a>
					    </c:when>
					 <c:otherwise>
					   <a class="btn"
                            href="/ManEnv/designPatternCategory/${project.id}/design_pattern_component/IO/scan"><i class="icon-arrow-left"></i> 上一步</a>
                        <a class="btn"
                            href="/ManEnv/designPatternCategory/${project.id}/design_pattern_component/CONTROL/scan"><i class="icon-arrow-right"></i> 下一步</a>
					 </c:otherwise>
					 </c:choose>
						<a class="btn"
                            href="/ManEnv/designPatternCategory/list"><i class="icon-circle-arrow-left"></i>返回</a>
					</div>
					<div class="control-group span7">
						<label class="control-label" for="">设计模式实例名称</label>
						<div class="controls">
							<span class="uneditable-input input-large"><c:out
									value="${dpiName}"></c:out></span>
						</div>
					</div>

					<div class="control-group span7">
						<label class="control-label" for="pageList">已有页面</label>
						<div id="pageList" class="controls">
							<!-- <div class="btn-group">
								<a class="btn  " href="#add_page">增加</a>
							</div>
							-->

							<div class="">
								<p />
								<table class="table table-bordered table-striped table-hover">
									<thead>
										<tr>
											<th>#</th>
											<th>页面名称</th>
											<th>页面类型</th>
											<th>操作</th>
										</tr>
									</thead>
									<tbody>
										<c:forEach items="${exist_pages}" var="instance"
											varStatus="status">
											<tr>
												<td>${status.count}</td>
												<td>${instance.get("page_name").getValue()}</td>
												<td>${instance.get("page_type").getValue()}</td>
												<td>
													<div class="btn-group">
														<button class="btn  " name="view_page"
															data-target="#page_info_panel" data-toggle="modal" data-backdrop="false"><i class="icon-search"></i> 详细</button>
												 <c:choose>
                                                     <c:when test="${isEdit}" >
														<button class="btn" onclick="showPageDeletePanel('${instance.get('id').getValue()}',this)"><i class="icon-remove"></i> 删除</button>
													</c:when>
												</c:choose>
														<input type="hidden" name="id" value="${instance.get('id').getValue()}" /> 
														<input type="hidden" name="pageType" value="${instance.get('page_type').getValue()}" />
													</div>
												</td>
											</tr>
										</c:forEach>
									</tbody>
								</table>
							</div>
						</div>
					</div>
					
					<div class="control-group span7">
                        <label class="control-label" for="pageList">已有显示数据区</label>
                        <div id="pageList" class="controls">
                            <c:choose>
                            <c:when test="${isEdit}" >
                             <div class="btn-group">
                                <button class="btn" data-target="#display_zone_panel"
                                            data-toggle="modal" data-backdrop="false"><i class="icon-plus" ></i> 增加</button>
                            </div>
                            </c:when>
                            </c:choose>
                           
                            <div class="">
                                <p />
                                <table class="table table-bordered table-striped table-hover">
                                    <thead>
                                        <tr>
                                            <th>#</th>
                                            <th>名称</th>
                                            <th>类型</th>
                                            <th>大小</th>
                                            <c:choose>
                                            <c:when test="${isEdit}" >
                                            <th>操作</th>
                                            </c:when>
                                            </c:choose>
                                        </tr>
                                    </thead>
                                    <tbody>
                                           <c:forEach items="${displayZones}" var="displayZone" varStatus="status">
                                            <tr>
                                                <td>${status.count}</td>
                                                 <td>${displayZone.name}</td>
                                                <td>${displayZone.entityUri}</td>
                                                <td>${displayZone.size}</td>
                                            <c:choose>
                                                <c:when test="${isEdit}" >
                                                <td>
                                                    <div class="btn-group">
                                                        <button class="btn" name="delete_displayZone" onclick="showDisplayZoneDeletePanel('${displayZone.id }', this)"><i class="icon-trash"></i> 删除</button>
                                                        <input type="hidden" value="${displayZone.id }" />
                                                    </div>
                                                </td>
                                             </c:when>
                                             </c:choose>
                                            </tr>
                                        </c:forEach>
                                            
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    
                    <div class="control-group span7">
                        <label class="control-label" for="pageList">页面变量</label>
                        <div id="pageList" class="controls">
                            <c:choose>
                            <c:when test="${isEdit}" >
                             <div class="btn-group">
                                <button class="btn" data-target="#add_page_variable_panel"
                                            data-toggle="modal" data-backdrop="false"><i class="icon-plus" ></i> 增加</button>
                            </div>
                            </c:when>
                            </c:choose>
                           
                            <div class="">
                                <p />
                                <table class="table table-bordered table-striped table-hover">
                                    <thead>
                                        <tr>
                                            <th>#</th>
                                            <th>名称</th>
                                            <th>类型</th>
                                            <th>初始值</th>
                                            <c:choose>
                                                <c:when test="${isEdit}" >
                                                    <th>操作</th>
                                                </c:when>
                                            </c:choose>
                                        </tr>
                                    </thead>
                                    <tbody>
                                           <c:forEach items="${variables}" var="vars" varStatus="status">
                                           <c:choose>
                                           <c:when test="${!empty vars.project}">
                                            <tr>
                                                <td>${status.count}</td>
                                                <td>${vars.name}</td>
                                                <td>${vars.type}</td>
                                                <td>${vars.init}</td>
                                            <c:choose>
                                                <c:when test="${isEdit}" >
                                                <td>
                                                    <div class="btn-group">
                                                        <button class="btn" name="delete-variable-btn" onclick="showVariableDeletePanel('${vars.id}', this)"><i class="icon-trash"></i> 删除</button>
                                                        <input type="hidden" value="${vars.id}" />
                                                    </div>
                                                </td>
                                             </c:when>
                                             </c:choose>

                                            </tr>
                                            </c:when>
                                            </c:choose>
                                        </c:forEach>
                                            
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
					
                <c:choose>
                   <c:when test="${isEdit}" >
					<div class="control-group span9" id="add_page">
						<label class="control-label">添加新页面</label>
						<div class="controls">
							<br /> <br />
							<div class="tabbable" style="margin-bottom: 18px;">
								<ul class="nav nav-tabs">
									<li class=""><a href="#tab5" data-toggle="tab">ARINC661</a></li>
									<li class="active"><a href="#tab6" data-toggle="tab">自定义DF</a></li>
									<li class=""><a href="#tab7" data-toggle="tab">页面数据</a></li>
								</ul>
								<div class="tab-content"
									style="padding-bottom: 9px; border-bottom: 1px solid #ddd;">
									<div class="tab-pane" id="tab5">
										<form class="form-horizontal"
											action="<%=request.getContextPath()%>/displayDesignPattern/designPatternCategory/arinc661/add"
											method="post" enctype="multipart/form-data" onsubmit="return valid()">
											<input type="hidden" name="projectId"
												value="${project.id}"></input> <input type="hidden"
												name="dpiName" value="${dpiName}"></input> <input
												type="hidden" name="dpcUri" value="${dpcUri}"></input> <input
												type="hidden" name="pageType" value="arinc661"></input>
											<div class="control-group" >
												<label class="control-label" for="pageName">页面名称</label>
												<div class="controls">
													<input type="text" name="pageName" placeholder="页面名称">
													
												</div>
											</div>
											<!-- div class="control-group">
												<label class="control-label" for="displayFrequency">显示频率</label>
												<div class="controls">
													<input name="displayFrequency" type="text" /> Hz
												</div>
											</div -->
											<div class="control-group">
												<label class="control-label" for="viewData">上传文件</label>
												<div id="viewData" class="controls">
													<input type="file" class="file-inputs" title="上传文件"
														name="scadeFile" />
												</div>
											</div>
											<div class="control-group">
												<label class="control-label" for="viewData">上传截图</label>
												<div id="viewData" class="controls">
													<input type="file" class="file-inputs" title="上传截图"
														name="imageFile" />
												</div>
											</div>
											<div class="control-group">
												<label class="control-label" for="viewData">连接</label>
												<div id="" class="controls">
													<button class="btn"
														data-target="#add_connection_panel" data-toggle="modal"data-backdrop="false"><i class="icon-plus"></i> 增加</button>
													<p />
													<input type="hidden" name="connections" value="" />
													<table
														class="table table-bordered table-striped table-hover"
														id="connections_table">
														<thead>
															<tr>
																<th>#</th>
																<th>SCADE Suite I/O</th>
																<th>&lt;=&gt;</th>
																<th>Graphical Panel I/O</th>
															</tr>
														</thead>
														<tbody>
														</tbody>
													</table>
												</div>
											</div>
											<div class="control-group">
												<div class="controls">
													<button type="submit" class="btn"><i class="icon-ok"></i> 确认</button>
													<button type="reset" class="btn"><i class="icon-remove"></i> 取消</button>
												</div>
											</div>
										</form>
									</div>
									<div class="tab-pane active" id="tab6">
										<form class="form-horizontal"
											action="/ManEnv/displayDesignPattern/designPatternCategory/userDefineDF/add"
											method="post"onsubmit="return valid2()">
											<input type="hidden" name="projectId"
												value="${project.id}"></input> <input type="hidden"
												name="dpiName" value="${dpiName}"></input> <input
												type="hidden" name="dpcUri" value="${dpcUri}"></input> <input
												type="hidden" name="pageType" value="userDefineDF"></input>
											<div class="control-group" id="div_page">
												<label class="control-label" for="pageName">页面名称</label>
												<div class="controls">
													<input type="text" id="ud-page-name" name="pageName" placeholder="页面名称">
													<span class="help-inline" id="help_page">${errormsg}</span>
												</div>
											</div>
											<div class="control-group">
                                                <label class="control-label" for="isMain">默认页面</label>
                                                <div class="controls">
                                                    <label class="checkbox-inline">
                                                        <input type="radio" name="isMain" value="true">是
                                                        <input type="radio" name="isMain" value="false" checked>否
                                                    </label>
                                                </div>
                                            </div>
											<!-- div class="control-group">
												<label class="control-label" for="displayFrequency">显示频率</label>
												<div class="controls">
													<input name="displayFrequency" type="text" /> Hz
												</div>
											</div -->
											<div class="control-group">
												<label class="control-label" for="viewData">已有页面元素</label>
												<div id="" class="controls">
													<button class="btn  "
														data-target="#add_element_panel" data-toggle="modal"data-backdrop="false"><i class="icon-plus"></i>增加</button>
													<p />
													<input type="hidden" name="pageElements" value="" />
													<table
														class="table table-bordered table-striped table-hover"
														id="elements_table">
														<thead>
															<tr>
																<th>#</th>
																<th>名称</th>
																<th>类型</th>
															</tr>
														</thead>
														<tbody>
														</tbody>
													</table>
												</div>
											</div>

											<div class="control-group">
												<div class="controls">
													<button type="submit" class="btn  "><i class="icon-ok"></i> 确认</button>
													<button type="reset" class="btn"><i class="icon-remove"></i> 取消</button>
												</div>
											</div>
										</form>
									</div>
									<div class="tab-pane" id="tab7">
										<form class="form-horizontal"
											action="<%=request.getContextPath()%>/displayDesignPattern/designPatternCategory/pageData/add"
											method="post" enctype="multipart/form-data" onsubmit="return valid()">
											<input type="hidden" name="projectId"
												value="${project.id}"></input> <input type="hidden"
												name="dpiName" value="${dpiName}"></input> <input
												type="hidden" name="dpcUri" value="${dpcUri}"></input> <input
												type="hidden" name="pageType" value="pageData"></input>
											<div class="control-group" >
												<label class="control-label" for="pageName">页面名称</label>
												<div class="controls">
													<input type="text" name="pageName" placeholder="页面名称">
												</div>
											</div>
											<div class="control-group">
                                                <label class="control-label" for="isMain">默认页面</label>
                                                <div class="controls">
                                                    <label class="checkbox-inline">
                                                        <input type="radio" name="isMain" value="true">是
                                                        <input type="radio" name="isMain" value="false" checked>否
                                                    </label>
                                                </div>
                                            </div>
											<div class="control-group">
												<label class="control-label" for="viewData">页面元素</label>
												<div id="" class="controls">
													<button class="btn  "
														data-target="#add_variable_panel" data-toggle="modal"data-backdrop="false"><i class="icon-plus"></i>增加</button>
													<p />
													<!-- <input type="hidden" name="variables" value="" /> -->
													<table	class="table table-bordered table-striped table-hover"	id="variables_table">
														<thead>
															<tr>
																<th>#</th>
																<th>名称</th>
																<th>显示数据区</th>
																<th>指令码</th>
																<th>画图函数</th>
															</tr>
														</thead>
														<tbody>
														</tbody>
													</table>
												</div>
											</div>
											<div class="control-group">
												<div class="controls">
													<button type="submit" class="btn  "><i class="icon-ok"></i>&nbsp;确认</button>
													<button type="reset" class="btn"><i class="icon-cancel"></i>&nbsp;取消</button>
												</div>
											</div>
										</form>
									</div>
								</div>
							</div>
						</div>
					</div>
					</c:when>
					</c:choose>
				</div>

				<!-- div class="tab-pane" id="tab2"></div>
				<div class="tab-pane" id="tab3"></div>
				<div class="tab-pane" id="tab4"></div>
			</div>
		</div -->
		<!-- /tabbable -->
	</div>
</div>

<div class="modal hide fade" id="add_element_panel">
	<div class="modal-header">
		<button type="button" class="close" data-dismiss="modal"
			aria-hidden="true">&times;</button>
		<h3>添加页面元素</h3>
	</div>
	<div class="modal-body form-horizontal">
		<div class="control-group">
			<label class="control-label" for="element_name">页面元素名称</label>
			<div class="controls">
				<input id="element_name" type="text" />
			</div>
		</div>
		<div class="control-group">
			<label class="control-label" for="io">页面元素类型</label>
			<div class="controls" id="element_radio_group">
				<label class="radio"> <input type="radio" name="psRadio"
					id="static_string_element_radio" value="static_string">静态字符
				</label> <label class="radio"> <input type="radio" name="psRadio"
					id="dynamic_string_element_radio" value="dynamic_var">动态变量
				</label> <label class="radio"> <input type="radio" name="psRadio"
					id="point_element_radio" value="point">下划线
				</label> <label class="radio"> <input type="radio" name="psRadio"
					id="line_element_radio" value="line">直线
				</label> <label class="radio"> <input type="radio" name="psRadio"
					id="rectangle_element_radio" value="rectangle">长方形
				</label>
			</div>
		</div>
		<div class="control-group ">
            <label class="control-label" for="">位置</label>
            <div class="controls">
                <select onchange="changeSelectPosition(this.value)">
                    <option value=""></option>
                    <c:forEach items="${positions}" var="position">
                        <option value="${position.xIndex},${position.yIndex}">
                            <c:out value="${position.name}"></c:out>
                        </option>
                    </c:forEach>
                </select>
            </div>
        </div>
		<div id="elements_div">
			<div id="static_string_element">
				<div class="control-group ">
					<label class="control-label" for="x_coordinate">横坐标</label>
					<div class="controls">
						<input name="x_coordinate" type="text" class="xIndex"/>
					</div>
				</div>
				<div class="control-group ">
					<label class="control-label" for="y_coordinate">纵坐标</label>
					<div class="controls">
						<input name="y_coordinate" type="text" class="yIndex"/>
					</div>
				</div>
				<div class="control-group ">
					<label class="control-label" for="string_content">字符内容</label>
					<div class="controls">
						<input name="string_content" type="text" />
					</div>
				</div>
			</div>
			<div id="dynamic_string_element">
				<div class="control-group ">
					<label class="control-label" for="dynamic_x_coordinate">横坐标</label>
					<div class="controls">
						<input name="dynamic_x_coordinate" type="text" class="xIndex"/>
					</div>
				</div>
				<div class="control-group ">
					<label class="control-label" for="dynamic_y_coordinate">纵坐标</label>
					<div class="controls">
						<input name="dynamic_y_coordinate" type="text" class="yIndex"'/>
					</div>
				</div>
				<div class="control-group ">
					<label class="control-label" for="var_init">变量</label>
					<div class="controls">
						<select id="string_binding" name="var_id">
							<c:forEach items="${variables}" var="vars">
							     <option value="${vars.id}"><c:out value="${vars.type} ${vars.name} = ${vars.init}"></c:out></option>
							</c:forEach>
						</select>
					</div>
				</div>
				<div class="control-group ">
                    <label class="control-label" for="var_formula">变量公式</label>
                    <div class="controls">
                        <input name="var_formula" type="text" class="" placeholder=""/>
                    </div>
                </div>
			</div>
			<div id="point_element">
				<div class="control-group ">
					<label class="control-label" for="point_x_coordinate">横坐标</label>
					<div class="controls">
						<input name="point_x_coordinate" type="text" class="xIndex"/>
					</div>
				</div>
				<div class="control-group ">
					<label class="control-label" for="point_y_coordinate">纵坐标</label>
					<div class="controls">
						<input name="point_y_coordinate" type="text" class="yIndex"/>
					</div>
				</div>
			</div>
			<div id="line_element">
				<div class="control-group ">
					<label class="control-label" for="start_x_coordinate">起点横坐标</label>
					<div class="controls">
						<input name="start_x_coordinate" type="text" class="xIndex"/>
					</div>
				</div>
				<div class="control-group ">
					<label class="control-label" for="start_y_coordinate">起点纵坐标</label>
					<div class="controls">
						<input name="start_y_coordinate" type="text" class="yIndex"/>
					</div>
				</div>
				<div class="control-group ">
					<label class="control-label" for="end_x_coordinate">终点横坐标</label>
					<div class="controls">
						<input name="end_x_coordinate" type="text" />
					</div>
				</div>
				<div class="control-group ">
					<label class="control-label" for="end_y_coordinate">终点纵坐标</label>
					<div class="controls">
						<input name="end_y_coordinate" type="text" />
					</div>
				</div>
			</div>
            <div id="rectangle_element">
                <div class="control-group ">
                    <label class="control-label" for="rect_x_coordinate">横坐标</label>
                    <div class="controls">
                        <input name="rect_x_coordinate" type="text" class="xIndex" />
                    </div>
                </div>
                <div class="control-group ">
                    <label class="control-label" for="rect_y_coordinate">纵坐标</label>
                    <div class="controls">
                        <input name="rect_y_coordinate" type="text" class="yIndex"/>
                    </div>
                </div>
                <div class="control-group ">
                    <label class="control-label" for="radius">宽度</label>
                    <div class="controls">
                        <input name="rect_width" type="text" />
                    </div>
                </div>
                <div class="control-group ">
                    <label class="control-label" for="radius">高度</label>
                    <div class="controls">
                        <input name="rect_height" type="text" />
                    </div>
                </div>
            </div>
		</div>
	</div>
	<div class="modal-footer">
		<button class="btn  " id="add_element_btn"><i class="icon-ok"></i> 保存</button>
		<button class="btn" data-dismiss="modal" aria-hidden="true"><i class="icon-remove"></i> 关闭</button>
	</div>
</div>

<div class="modal hide fade" id="page_info_panel">
	<div class="modal-header">
		<button type="button" class="close" data-dismiss="modal"
			aria-hidden="true">&times;</button>
		<h3>页面详情</h3>
	</div>
	<div class="modal-body form-horizontal">
       <table class="table table-hover" >
            <thead>
                <tr>
                    <th style="width: 40%">属性</th>
                    <th style="width: 60%">详细信息</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>页面名称</td>
                    <td><span id="page_name_info"></span></td>
                </tr>
                <tr>
                    <td>页面类型</td>
                    <td><span id="page_type_info"></span></td>
                </tr>
                <tr class="userdefined-element">
                    <th>静态页面元素</th><th></th>
                </tr>
                <tr class="userdefined-element">
                    <td colspan="2">
                       <table class="table table-bordered table-striped table-hover">
                            <thead>
                            <tr>
                                <th>名字</th>
                                <th>x坐标</th>
                                <th>y坐标</th>
                                <th>内容</th>
                            </tr>
                             </thead>
                            <tbody id="static_string_info"></tbody>
                       </table>
                     </td>
                </tr>
                <tr class="userdefined-element">
                    <th>动态变量</th><th></th>
                </tr>
                <tr class="userdefined-element">
                    <td colspan="2">
                       <table class="table table-bordered table-striped table-hover">
                            <thead>
                            <tr>
                                <th>名字</th>
                                <th>x坐标</th>
                                <th>y坐标</th>
                                <th>变量公式</th>
                            </tr>
                             </thead>
                            <tbody id="dynamic_string_info"></tbody>
                       </table>
                     </td>
                </tr>
                <tr class="userdefined-element">
                    <th>下划线</th><th></th>
                </tr>
                <tr class="userdefined-element">
                    <td colspan="2">
                       <table class="table table-bordered table-striped table-hover">
                            <thead>
                            <tr>
                                <th>名字</th>
                                <th>x坐标</th>
                                <th>y坐标</th>
                            </tr>
                             </thead>
                            <tbody id="enter_info"></tbody>
                       </table>
                     </td>
                </tr>
                <tr class="userdefined-element">
                    <th>直线</th><th></th>
                </tr>
                <tr class="userdefined-element">
                    <td colspan="2">
                       <table class="table table-bordered table-striped table-hover">
                            <thead>
                            <tr>
                                <th>名字</th>
                                <th>起点x坐标</th>
                                <th>起点y坐标</th>
                                <th>终点x坐标</th>
                                <th>终点y坐标</th>
                            </tr>
                             </thead>
                            <tbody id="line_info"></tbody>
                       </table>
                     </td>
                </tr>
                <tr class="userdefined-element">
                    <th>长方形</th><th></th>
                </tr>
                <tr class="userdefined-element">
                    <td colspan="2">
                       <table class="table table-bordered table-striped table-hover">
                            <thead>
                            <tr>
                                <th>名字</th>
                                <th>x坐标</th>
                                <th>y坐标</th>
                                <th>宽度</th>
                                <th>高度</th>
                            </tr>
                             </thead>
                            <tbody id="rectangle_info"></tbody>
                       </table>
                     </td>
                </tr>
                
                <tr class="arinc661-element">
                    <td>SCADE Sutie File</td>
                    <td><button class="btn" id="scade_file_info">
                    <i class="icon-download-alt"></i>&nbsp;下载</button></td>
                </tr >
                <tr class="arinc661-element">
                    <td>页面截图</td><td></td>
                </tr>
                <tr class="arinc661-element">
                    <td colspan=2>
                        <a id="scade_image"  data-lightbox="scade-image">
                        <img id="scade_image_small" />
                        </a>
                    </td>
                </tr>
                <tr class="arinc661-element">
                    <td>连接</td>
                    <td><span id="connections_info"></span></td>
                </tr>
                <tr class="pageData-element">
                    <th>页面元素</th><th></th>
                </tr>
                <tr class="pageData-element">
                    <td colspan="2">
                       <table class="table table-bordered table-striped table-hover">
                            <thead>
                            <tr>
                                <th style="width: 10%">名字</th>
                                <th style="width: 25%">显示数据区</th>
                                <th style="width: 15%">指令码</th>
                                <th style="width: 50%">画图函数</th>
                            </tr>
                             </thead>
                            <tbody id="page_variables_info"></tbody>
                       </table>
                     </td>
                </tr>              
            </tbody>
        </table>
	
		<!-- div class="control-group">
			<label class="control-label" for="page_name_info">页面名称</label>
			<div class="controls">
				<span class="uneditable-input input-xlarge" id="page_name_info"></span>
			</div>
		</div>
		<div class="control-group">
			<label class="control-label" for="page_name_info">页面类型</label>
			<div class="controls">
				<span class="uneditable-input input-xlarge" id="page_type_info"></span>
			</div>
		</div>
		<div class="control-group">
			<label class="control-label" for="page_name_info">显示频率</label>
			<div class="controls">
				<span class="uneditable-input input-xlarge"
					id="display_frequency_info"></span>
			</div>
		</div -->
		<!-- div id="arinc661_page_info">
			<div class="control-group">
				<label class="control-label" for="scade_file_info">SCADE
					Sutie File</label>
				<div class="controls">
					<span class="uneditable-input input-xlarge" id="scade_file_info"></span>
				</div>
			</div>
			<div class="control-group">
				<label class="control-label" for="image_file">Image File</label>
				<div class="controls">
					<span class="uneditable-input input-xlarge" id="scade_image_info"></span>
				</div>
			</div>
			<div class="control-group">
				<label class="control-label" for="connections">连接</label>
				<div class="controls">
					<table class="table table-bordered table-striped table-hover">
						<tbody id="connections_info"></tbody>
					</table>
				</div>
			</div>
		</div -->
		<!--end of arinc661 page info-->
		<!-- div id="userDefineDF_page_info">

			<div class="control-group">
				<label class="control-label" for="elements_info">静态变量</label>
				<div class="controls">
					<table class="table table-bordered table-striped table-hover">
						<thead>
							<tr>
								<th>名字</th>
								<th>x坐标</th>
								<th>y坐标</th>
								<th>内容</th>
							</tr>
						</thead>
						<tbody id="elements_info"></tbody>
					</table>
				</div>
			</div>
		</div -->
		<!-- end of userDefineDF page info -->
		<!-- div id="pageData_page_info">
			<div class="control-group">
				<label class="control-label" for="scade_file_info">页面文件</label>
				<div class="controls">
					<span class="uneditable-input input-xlarge" id="page_file_info"></span>
				</div>
			</div>
			<div class="control-group">
				<label class="control-label" for="scade_image">页面</label>
				<div class="controls">
					<img id="" src="<c:url value='/img/temp.png'/>"
						class="img-polaroid" />
				</div>
			</div>
			<div class="control-group">
				<label class="control-label" for="image_file">页面截图</label>
				<div class="controls">
					<span class="uneditable-input input-xlarge" id="page_image_info"></span>
				</div>
			</div>
			<div class="control-group">
				<label class="control-label" for="variables_info">动态变量</label>
				<div class="controls">
					<table class="table table-bordered table-striped table-hover">
						<thead>
							<tr>
								<th>名字</th>
								<th>类型</th>
								<th>绑定</th>
							</tr>
						</thead>
						<tbody id="variables_info"></tbody>
					</table>
				</div>
			</div>
		</div -->
		<!-- end of pageData page info -->
	</div>
	<div class="modal-footer">
		<button class="btn" data-dismiss="modal" aria-hidden="true"><i class="icon-ok"></i> 确定</button>
	</div>
</div>

<div class="modal hide fade" id="add_connection_panel">
	<div class="modal-header">
		<button type="button" class="close" data-dismiss="modal"
			aria-hidden="true">&times;</button>
		<h3>添加连接</h3>
	</div>
	<div class="modal-body form-horizontal">
		<div class="control-group">
			<label class="control-label" for="suite_variable">SCADE Suite
				I/O</label>
			<div class="controls">
				<input type="text" id="suite_variable" placeholder="">
			</div>
		</div>
		<div class="control-group">
			<label class="control-label" for="io">输入输出</label>
			<div class="controls" id="ps_radio_group">
				<label class="radio"> <input type="radio" name="psRadio"
					id="optionsRadios1" value="panel_to_suite" checked> Suite
					&lt;= Panel
				</label> <label class="radio"> <input type="radio" name="psRadio"
					id="optionsRadios2" value="suite_to_panel"> Suite =&gt;
					Panel
				</label>
			</div>
		</div>
		<div class="control-group">
			<label class="control-label" for="panel_variable">Graphical
				Panel I/O</label>
			<div class="controls">
				<input type="text" id="panel_variable" placeholder="">
			</div>
		</div>
	</div>
	<div class="modal-footer">
		<button class="btn  " id="add_connection"><i class="icon-ok"></i> 保存</button>
		<button class="btn" data-dismiss="modal" aria-hidden="true"><i class="icon-remove"></i> 关闭</button>
	</div>
</div>

<div class="modal hide fade" id="add_variable_panel">
	<div class="modal-header">
		<button type="button" class="close" data-dismiss="modal"
			aria-hidden="true">&times;</button>
		<h3>添加页面元素</h3>
	</div>
	<div class="modal-body form-horizontal">
		<div class="control-group">
			<label class="control-label" for="variable_name">页面元素名称</label>
			<div class="controls">
				<input type="text" id="variable-name" placeholder="元素名称">
			</div>
		</div>
		<div id="variables_div">
			<div class="control-group">
				<label class="control-label" for="display_data">显示数据区</label>
				<div class="controls">
					<select style="width: 200px" id="display-zone-id">
						<c:forEach items="${displayZones}" var="displayZone">
							<option value="${displayZone.id}">
								<c:out value="${displayZone.name}" />
							</option>
						</c:forEach>
					</select> 
				</div>
			</div>
			<div class="control-group" >
                <label class="control-label" for="display_data">指令码</label>
                <div class="controls">
                     <input type="text" class="input-medium" placeholder="指令码" id="page-element-code">
                </div>
            </div>
			<div class="control-group">
				<label class="control-label" for="data_entity">画图组件</label>
				<div class="controls">
					<select id="draw-method">
						<c:forEach items="${methodComponentLinks}" var="link">
							<option value="${link.method.id};${link.component.uri}">
								<c:out value="${link.method.methodSigniture} -- ${link.component.name}"></c:out>
							</option>
						</c:forEach>
					</select>
				</div>
			</div>
		</div>
	</div>
	<div class="modal-footer">
		<button class="btn"  onclick="addPageElement()"><i class="icon-ok"></i>&nbsp;保存</button>
		<button class="btn" data-dismiss="modal" aria-hidden="true"><i class="icon-remove"></i>&nbsp;关闭</button>
	</div>
</div>

<div class="modal hide fade" id="display_zone_panel">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"
            aria-hidden="true">&times;</button>
        <h3>添加显示数据区</h3>
    </div>
    <form class="form-horizontal" action="<%=request.getContextPath()%>/displayZone/designPatternCategory/${project.id}/add" method="post"onsubmit="return validDisplayZone()">
		<div class="modal-body">
			<div class="control-group" id="display-zone-name-div">
				<label class="control-label" for="displayZone">名称</label>
				<div class="controls">
					<input type="text" name="name" placeholder="请输入显示数据区名称" id="display-zone-name"></input> <span
						class="help-block" id="display-zone-name-help">请输入英文名称，例如 flightPointsZone${errormsg}</span>
				</div>
			</div>

			<div class="control-group" id="display-zone-number-div">
				<label class="control-label" for="busType">大小</label>
				<div class="controls">
					<input type="text" name="size" placeholder="1" id="display-zone-number"></input> 
					<span class="help-block" id="display-zone-number-help">请输入数字${errormsg}</span>
				</div>
			</div>

			<div class="control-group">
				<label class="control-label" for="read_bus_processing_method">映射实体</label>
				<div class="controls">
					<select name="entityUri">
						<c:forEach items="${domainEntitys }" var="domainEntity">
							<option value="${domainEntity.uri}">
								<c:out value="${domainEntity.name}"></c:out>
							</option>
						</c:forEach>
					</select>
				</div>
			</div>
		</div>
		<div class="modal-footer">
			<button class="btn "><i class="icon-ok"></i> 保存</button>
			<button class="btn" data-dismiss="modal" aria-hidden="true"><i class="icon-remove"></i> 关闭</button>
		</div>
	</form>
</div>

<div class="modal hide fade" id="add_page_variable_panel">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"
            aria-hidden="true">&times;</button>
        <h3>添加页面变量</h3>
    </div>
    <form class="form-horizontal" action="<%=request.getContextPath()%>/variable/designPatternCategory/${project.id}/add" method="post">
        <div class="modal-body">
            <div class="control-group" >
                <label class="control-label" for="name">名称</label>
                <div class="controls">
                    <input type="text" name="name" placeholder="页面变量名称"></input> <span
                        class="help-block" >请输入英文名称，例如index${errormsg}</span>
                </div>
            </div>

            <div class="control-group" >
                <label class="control-label" for="type">类型</label>
                <div class="controls">
                    <select name="type">
                            <option value="int">int</option>
                    </select>
                </div>
            </div>

            <div class="control-group">
                <label class="control-label" for="init">初始值</label>
                <div class="controls">
                    <input type="text" name="init" placeholder=""></input> <span
                        class="help-block" >请输入数字${errormsg}</span>
                </div>
            </div>
        </div>
        <div class="modal-footer">
            <button class="btn" ><i class="icon-ok"></i> 保存</button>
            <button class="btn" data-dismiss="modal" aria-hidden="true"><i class="icon-remove"></i> 关闭</button>
        </div>
    </form>
</div>

<div class="modal hide fade" id="delete-display-zone-panel">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h3>删除显示数据区</h3>
    </div>
    <div class="modal-body">
        <p>确定要删除显示数据区?</p>
    </div>
    <div class="modal-footer">
        <!-- button class="btn" data-dismiss="modal" aria-hidden="true">关闭</button-->
        <button class="btn" data-dismiss="modal" id="delete-display-zone-btn">
            <i class="icon-ok"></i>&nbsp;确定
        </button>
        <button class="btn" data-dismiss="modal">
            <i class="icon-remove"></i>&nbsp;取消
        </button>
    </div>
</div>

<div class="modal hide fade" id="delete-page-variable-panel">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h3>删除页面变量</h3>
    </div>
    <div class="modal-body">
        <p>确定要删除页面变量?</p>
    </div>
    <div class="modal-footer">
        <!-- button class="btn" data-dismiss="modal" aria-hidden="true">关闭</button-->
        <button class="btn" data-dismiss="modal" id="delete-page-variable-btn">
            <i class="icon-ok"></i>&nbsp;确定
        </button>
        <button class="btn" data-dismiss="modal">
            <i class="icon-remove"></i>&nbsp;取消
        </button>
    </div>
</div>

<div class="modal hide fade" id="delete-page-panel">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h3>删除页面</h3>
    </div>
    <div class="modal-body">
        <p>确定要删除页面?</p>
    </div>
    <div class="modal-footer">
        <!-- button class="btn" data-dismiss="modal" aria-hidden="true">关闭</button-->
        <button class="btn" data-dismiss="modal" id="delete-page-btn">
            <i class="icon-ok"></i>&nbsp;确定
        </button>
        <button class="btn" data-dismiss="modal">
            <i class="icon-remove"></i>&nbsp;取消
        </button>
    </div>
</div>


<!-- Le javascript
    ================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="<c:url value='/js/editDisplayDesignPatternComponent.js'/>"></script>